<template>
  <div style="margin-right: 20px">
    <svg-icon @click="doChange" style="margin-right: 3px;cursor: pointer"  :icon-class="narrowIcon"></svg-icon>
    <svg-icon @click="doChange" style="cursor: pointer"  :icon-class="broadIcon"></svg-icon>
  </div>
</template>

<script>
export default {
  name: "table-change",
  data(){
    return {
      status:'mini'
    }
  },
  computed:{
    narrowIcon(){
      const icons = this.$themes.getTableChangeIcon()
      return this.status==='mini'?icons.narrow:'icon-table-c3'
    },
    broadIcon(){
      const icons = this.$themes.getTableChangeIcon()
      return this.status==='small'?icons.broad:'icon-table-c5'
    }
  },
  methods:{
    doChange(){
      this.status = this.status==='small'?'mini':'small'
      this.$emit('change',this.status)
    },
  },
  mounted() {
    this.$emit('change',this.status)
  }
}
</script>

<style scoped>

</style>
